import React from 'react';
import './index.less';
import { Form, Input, Button, Space } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import API, { getImg } from '@/api';
import { useModel, useRequest } from 'umi';
function Login({ history }) {
  const [form] = Form.useForm();
  const [verifyCode, changeCode] = useState('');
  const [icode, changeIcode] = useState('');
  const { initialState, setInitialState } = useModel('@@initialState');

  const fetchUserInfo = async () => {
    const userInfo = await initialState?.fetchUserInfo?.();
    if (userInfo) {
      await setInitialState((s) => ({
        ...s,
        info: userInfo,
      }));
    }
  };
  const loginFn = async (values) => {
    return API.login_process({ ...values, icode });
  };
  const { data, loading, run } = useRequest(loginFn, {
    manual: true,
    formatResult: (res) => res?.t,
  });
  useEffect(async () => {
    if (!loading) {
      if (data) {
        await fetchUserInfo();
        history.push('/');
      } else {
        reload();
      }
    }
  }, [loading]);
  const getUUID = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
      return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(
        16,
      );
    });
  };
  const reload = () => {
    const code = getUUID();
    const url = getImg + '?icode=' + code;
    changeCode(url);
    changeIcode(code);
  };
  const checkVCode = async (rule, value) => {
    if (!value) {
      return Promise.reject('请输入验证码');
    } else {
      if (!/^[A-Za-z0-9]{3,4}$/.test(value)) {
        return Promise.reject('请输入正确的验证码');
      } else {
        return Promise.resolve();
      }
    }
  };
  return (
    <div className="login-x">
      <div className="login-content">
        <div className="login-form">
          <div className="title">网络安全综合监管平台</div>
          <Form
            form={form}
            className="form-box"
            onFinish={run}
            validateTrigger="onBlur"
          >
            <div className="sub-title">账号密码登录</div>
            <Form.Item
              name="up"
              rules={[{ required: true, message: '请输入账号' }]}
            >
              <Input
                autoComplete="username"
                prefix={<UserOutlined />}
                placeholder="请输入账号"
              ></Input>
            </Form.Item>
            <Form.Item
              name="pp"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input
                prefix={<LockOutlined />}
                type="password"
                autoComplete="current-password"
                placeholder="请输入密码"
              ></Input>
            </Form.Item>
            <Form.Item>
              <Space className="code-x">
                <Form.Item
                  name="verifyCode"
                  noStyle
                  rules={[{ validator: checkVCode }]}
                >
                  <Input placeholder="请输入验证码"></Input>
                </Form.Item>
                <img
                  className="verify-x"
                  onClick={reload}
                  src={verifyCode}
                ></img>
              </Space>
            </Form.Item>
            <Button
              type="primary"
              loading={loading}
              block
              htmlType="submit"
              className="sub-x"
            >
              {!loading ? '登录' : '登录中...'}
            </Button>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default Login;
